<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Components | Nyasa - Responsive admin template.</title>
        <link rel="shortcut icon" href="img/favicon.ico">
        <!--STYLESHEET-->
        <!--=================================================-->
        <!--Roboto Slab Font [ OPTIONAL ] -->
        <link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,700" rel="stylesheet">
        <link href="http://fonts.googleapis.com/css?family=Roboto:500,400italic,100,700italic,300,700,500italic,400" rel="stylesheet">
        <!--Bootstrap Stylesheet [ REQUIRED ]-->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!--Jasmine Stylesheet [ REQUIRED ]-->
        <link href="css/style.css" rel="stylesheet">
        <!--Font Awesome [ OPTIONAL ]-->
        <link href="plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
        <!--Switchery [ OPTIONAL ]-->
        <link href="plugins/switchery/switchery.min.css" rel="stylesheet">
        <!--Bootstrap Select [ OPTIONAL ]-->
        <link href="plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
        <!--Demo [ DEMONSTRATION ]-->
        <link href="css/demo/jasmine.css" rel="stylesheet">
        <!--SCRIPT-->
        <!--=================================================-->
        <!--Page Load Progress Bar [ OPTIONAL ]-->
        <link href="plugins/pace/pace.min.css" rel="stylesheet">
        <script src="plugins/pace/pace.min.js"></script>
    </head>
    <body>
        <div id="container" class="effect mainnav-lg navbar-fixed mainnav-fixed">
            <!--NAVBAR-->
            <!--===================================================-->
            <header id="navbar">
                <div id="navbar-container" class="boxed">
                    <!--Brand logo & name-->
                    <!--================================-->
                    <div class="navbar-header">
                        <a href="index.html" class="navbar-brand">
                            <i class="fa fa-cube brand-icon"></i>
                            <div class="brand-title">
                                <span class="brand-text">Nyasa</span>
                            </div>
                        </a>
                    </div>
                    <!--================================-->
                    <!--End brand logo & name-->
                    <!--Navbar Dropdown-->
                    <!--================================-->
                    <div class="navbar-content clearfix">
                        <ul class="nav navbar-top-links pull-left">
                            <!--Navigation toogle button-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="tgl-menu-btn">
                                <a class="mainnav-toggle" href="ui-components.html#"> <i class="fa fa-navicon fa-lg"></i> </a>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End Navigation toogle button-->
                            <!--Profile toogle button-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li id="profilebtn" class="hidden-xs">
                                <a href="JavaScript:void(0);"> <i class="fa fa-user fa-lg"></i> </a>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End Profile toogle button-->
                            <!--Messages Dropdown-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="dropdown">
                                <a href="ui-components.html#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-envelope fa-lg"></i> <span class="badge badge-header badge-warning">9</span> 
                                </a>
                                <!--Message dropdown menu-->
                                <div class="dropdown-menu dropdown-menu-md with-arrow">
                                    <div class="pad-all bord-btm">
                                        <div class="h4 text-muted text-thin mar-no">You have 3 messages.</div>
                                    </div>
                                    <div class="nano scrollable">
                                        <div class="nano-content">
                                            <ul class="head-list">
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="ui-components.html#" class="media">
                                                        <div class="media-left"> <img src="img/av2.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Andy sent you a message</div>
                                                            <small class="text-muted">15 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="ui-components.html#" class="media">
                                                        <div class="media-left"> <img src="img/av4.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Lucy sent you a message</div>
                                                            <small class="text-muted">30 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="ui-components.html#" class="media">
                                                        <div class="media-left"> <img src="img/av3.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Jackson sent you a message</div>
                                                            <small class="text-muted">40 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="ui-components.html#" class="media">
                                                        <div class="media-left"> <img src="img/av6.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Donna sent you a message</div>
                                                            <small class="text-muted">5 hours ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="ui-components.html#" class="media">
                                                        <div class="media-left"> <img src="img/av4.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Lucy sent you a message</div>
                                                            <small class="text-muted">Yesterday</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="ui-components.html#" class="media">
                                                        <div class="media-left"> <img src="img/av3.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Jackson sent you a message</div>
                                                            <small class="text-muted">Yesterday</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--Dropdown footer-->
                                    <div class="pad-all bord-top">
                                        <a href="ui-components.html#" class="btn-link text-dark box-block"> <i class="fa fa-angle-right fa-lg pull-right"></i>Show All Messages </a>
                                    </div>
                                </div>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End message dropdown-->
                            <!--Notification dropdown-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="dropdown">
                                <a href="ui-components.html#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-bell fa-lg"></i> <span class="badge badge-header badge-danger">5</span> </a>
                                <!--Notification dropdown menu-->
                                <div class="dropdown-menu dropdown-menu-md with-arrow">
                                    <div class="pad-all bord-btm">
                                        <div class="h4 text-muted text-thin mar-no"> Notification </div>
                                    </div>
                                    <div class="nano scrollable">
                                        <div class="nano-content">
                                            <ul class="head-list">
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="ui-components.html#" class="media">
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-primary"> <i class="fa fa-comment fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">New comments waiting approval</div>
                                                            <small class="text-muted">15 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="ui-components.html#" class="media">
                                                        <span class="badge badge-success pull-right">90%</span>
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-danger"> <i class="fa fa-hdd-o fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">HDD is full</div>
                                                            <small class="text-muted">50 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="ui-components.html#" class="media">
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-info"> <i class="fa fa-file-word-o fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Write a news article</div>
                                                            <small class="text-muted">Last Update 8 hours ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="ui-components.html#" class="media">
                                                        <span class="label label-danger pull-right">New</span>
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-purple"> <i class="fa fa-comment fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Comment Sorting</div>
                                                            <small class="text-muted">Last Update 8 hours ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="ui-components.html#" class="media">
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-success"> <i class="fa fa-user fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">New User Registered</div>
                                                            <small class="text-muted">4 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--Dropdown footer-->
                                    <div class="pad-all bord-top">
                                        <a href="ui-components.html#" class="btn-link text-dark box-block"> <i class="fa fa-angle-right fa-lg pull-right"></i>Show All Notifications </a>
                                    </div>
                                </div>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End notifications dropdown-->
                        </ul>
                        <ul class="nav navbar-top-links pull-right">
                            <!--Profile toogle button-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="hidden-xs" id="toggleFullscreen">
                                <a class="fa fa-expand" data-toggle="fullscreen" href="ui-components.html#" role="button">
                                <span class="sr-only">Toggle fullscreen</span>
                                </a>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End Profile toogle button-->
                            <!--User dropdown-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li id="dropdown-user" class="dropdown">
                                <a href="ui-components.html#" data-toggle="dropdown" class="dropdown-toggle text-right">
                                    <span class="pull-right"> <img class="img-circle img-user media-object" src="img/av1.png" alt="Profile Picture"> </span>
                                    <div class="username hidden-xs">John Doe</div>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right with-arrow">
                                    <!-- User dropdown menu -->
                                    <ul class="head-list">
                                        <li>
                                            <a href="ui-components.html#"> <i class="fa fa-user fa-fw fa-lg"></i> Profile </a>
                                        </li>
                                        <li>
                                            <a href="ui-components.html#">  <i class="fa fa-envelope fa-fw fa-lg"></i> Messages </a>
                                        </li>
                                        <li>
                                            <a href="ui-components.html#">  <i class="fa fa-gear fa-fw fa-lg"></i> Settings </a>
                                        </li>
                                        <li>
                                            <a href="ui-components.html#"> <i class="fa fa-sign-out fa-fw"></i> Logout </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End user dropdown-->
                            <!--Navigation toogle button-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="hidden-xs">
                                <a id="demo-toggle-aside" href="ui-components.html#">
                                <i class="fa fa-navicon fa-lg"></i>
                                </a>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End Navigation toogle button-->
                        </ul>
                    </div>
                    <!--================================-->
                    <!--End Navbar Dropdown-->
                </div>
            </header>
            <!--===================================================-->
            <!--END NAVBAR-->
            <div class="boxed">
                <!--CONTENT CONTAINER-->
                <!--===================================================-->
                <section id="content-container">
                    <div id="profilebody">
                        <div class="pad-all animated fadeInDown">
                            <div class="row">
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">Users</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-users fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">Inbox</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-envelope fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">FAQ</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-headphones fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">Settings</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-cogs fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">Calender</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-calendar fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">Pictures</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-picture-o fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <header class="pageheader">
                        <h3><i class="fa fa-home"></i> Components </h3>
                        <div class="breadcrumb-wrapper">
                            <span class="label">You are here:</span>
                            <ol class="breadcrumb">
                                <li> <a href="ui-components.html#"> Home </a> </li>
                                <li class="active"> Components </li>
                            </ol>
                        </div>
                    </header>
                    <!--Page content-->
                    <!--===================================================-->
                    <div id="page-content">
                        <div class="row">
                            <!--Tooltips-->
                            <!--===================================================-->
                            <div class="col-lg-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">Tooltips on Text</h3>
                                    </div>
                                    <div class="panel-body">
                                        <!--Tooltip Example-->
                                        <p class="muted">
                                            Lorem ipsum dolor sit amet <a class="btn-link add-tooltip" data-toggle="tooltip" href="ui-components.html#" data-original-title="Default tooltip">consectetuer</a> adipiscing elit, <a class="btn-link add-tooltip" data-toggle="tooltip" href="ui-components.html#" data-original-title="Another tooltip"> sed diam nonummy</a> nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat
                                            <a class="btn-link add-tooltip" data-toggle="tooltip" href="ui-components.html#" data-original-title="The last tip!">quis nostrud</a> exerci tation ullamcorper.
                                        </p>
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                    </div>
                                </div>
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">Four directions</h3>
                                    </div>
                                    <div class="panel-body">
                                        <!--Tooltip directions-->
                                        <button class="btn btn-default add-tooltip" data-placement="left" data-toggle="tooltip" data-original-title="Tooltip on left">Tooltip on left</button>
                                        <button class="btn btn-default add-tooltip" data-placement="top" data-toggle="tooltip" data-original-title="Tooltip on top">Tooltip on top</button>
                                        <button class="btn btn-default add-tooltip" data-placement="bottom" data-toggle="tooltip" data-original-title="Tooltip on bottom">Tooltip on bottom</button>
                                        <button class="btn btn-default add-tooltip" data-placement="right" data-toggle="tooltip" data-original-title="Tooltip on right">Tooltip on right</button>
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                    </div>
                                </div>
                            </div>
                            <!--===================================================-->
                            <!--POPOVERS-->
                            <!--===================================================-->
                            <div class="col-lg-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">Dismissible popover</h3>
                                    </div>
                                    <div class="panel-body">
                                        <!--Dismissible popover-->
                                        <a href="ui-components.html#popover" class="btn btn-md btn-warning add-popover" data-original-title="Bootstrap Popover" data-content="It\'s so simple to create a tooltop for my website!" data-placement="top" data-trigger="focus" data-toggle="popover">Dismissible popover</a>
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                    </div>
                                </div>
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">Four directions</h3>
                                    </div>
                                    <div class="panel-body">
                                        <!--Popover directions-->
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                        <button class="btn btn-default btn-active-success add-popover" data-toggle="popover" data-placement="left" data-original-title="Bootstrap Popover" data-content="Lorem ipsum dolor sit amet, consec tetuer adipiscing elit.">Popover on left</button>
                                        <button class="btn btn-default btn-active-success add-popover" data-toggle="popover" data-placement="top" data-original-title="Bootstrap Popover" data-content="Lorem ipsum dolor sit amet, consec tetuer adipiscing elit.">Popover on top</button>
                                        <button class="btn btn-default btn-active-success add-popover" data-toggle="popover" data-placement="bottom" data-original-title="Bootstrap Popover" data-content="Lorem ipsum dolor sit amet, consec tetuer adipiscing elit.">Popover on bottom</button>
                                        <button class="btn btn-default btn-active-success add-popover" data-toggle="popover" data-placement="right" data-original-title="Bootstrap Popover" data-content="Lorem ipsum dolor sit amet, consec tetuer adipiscing elit.">Popover on right</button>
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <!--Panel with Header-->
                                <!--===================================================-->
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">Bootstrap Alert</h3>
                                    </div>
                                    <div class="panel-body">
                                        <div class="alert alert-success">
                                            <strong>Well done!</strong> You successfully read this important alert message.
                                        </div>
                                        <div class="alert alert-info">
                                            <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
                                        </div>
                                        <div class="alert alert-warning">
                                            <strong>Warning!</strong> Best check yo self, you're not looking too good.
                                        </div>
                                        <div class="alert alert-danger">
                                            <strong>Oh snap!</strong> Change a few things up and try submitting again.
                                        </div>
                                        <div class="alert alert-dark">
                                            <strong>Oh snap!</strong> Change a few things up and try submitting again.
                                        </div>
                                        <div class="alert alert-mint">
                                            <strong>Oh snap!</strong> Change a few things up and try submitting again.
                                        </div>
                                        <div class="alert alert-primary">
                                            <strong>Oh snap!</strong> Change a few things up and try submitting again.
                                        </div>
                                    </div>
                                </div>
                                <!--===================================================-->
                                <!--End Panel with Header-->
                            </div>
                            <div class="col-md-6">
                                <!--Panel with Header-->
                                <!--===================================================-->
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Bootstrap Alert With Icon</h3>
                                    </div>
                                    <div class="panel-body">
                                        <!-- Alert layout example -->
                                        <div class="alert alert-success media fade in">
                                            <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                                            <div class="media-left">
                                                <span class="icon-wrap icon-wrap-xs icon-circle alert-icon">
                                                <i class="fa fa-bolt fa-lg"></i>
                                                </span>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="alert-title">Server Load Limited</h4>
                                                <p class="alert-message">Database server has reached its daily capicity</p>
                                            </div>
                                        </div>
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                        <!-- Info Alert layout example -->
                                        <div class="alert alert-info media fade in">
                                            <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                                            <div class="media-left">
                                                <span class="icon-wrap icon-wrap-xs icon-circle alert-icon">
                                                <i class="fa fa-bolt fa-lg"></i>
                                                </span>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="alert-title">Server Load Limited</h4>
                                                <p class="alert-message">Database server has reached its daily capicity</p>
                                            </div>
                                        </div>
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                        <!-- Warning Alert layout example -->
                                        <div class="alert alert-warning media fade in">
                                            <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                                            <div class="media-left">
                                                <span class="icon-wrap icon-wrap-xs icon-circle alert-icon">
                                                <i class="fa fa-bolt fa-lg"></i>
                                                </span>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="alert-title">Server Load Limited</h4>
                                                <p class="alert-message">Database server has reached its daily capicity</p>
                                            </div>
                                        </div>
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                        <!-- Mint Alert layout example -->
                                        <div class="alert alert-mint media fade in">
                                            <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                                            <div class="media-left">
                                                <span class="icon-wrap icon-wrap-xs icon-circle alert-icon">
                                                <i class="fa fa-bolt fa-lg"></i>
                                                </span>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="alert-title">Server Load Limited</h4>
                                                <p class="alert-message">Database server has reached its daily capicity</p>
                                            </div>
                                        </div>
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                        <!-- Warning Alert layout example -->
                                        <div class="alert alert-primary media fade in">
                                            <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                                            <div class="media-left">
                                                <span class="icon-wrap icon-wrap-xs icon-circle alert-icon">
                                                <i class="fa fa-bolt fa-lg"></i>
                                                </span>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="alert-title">Server Load Limited</h4>
                                                <p class="alert-message">Database server has reached its daily capicity</p>
                                            </div>
                                        </div>
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                    </div>
                                </div>
                                <!--===================================================-->
                                <!--End Panel with Header-->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <!--Panel with Header-->
                                <!--===================================================-->
                                <div class="panel">
                                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                                        <!-- Indicators -->
                                        <ol class="carousel-indicators">
                                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                                        </ol>
                                        <!-- Wrapper for slides -->
                                        <div class="carousel-inner" role="listbox">
                                            <div class="item active">
                                                <img src="http://placehold.it/900x400/39CCCC/000000" alt="...">
                                                <div class="carousel-caption">
                                                    <h3>MyAdmin is an Awesome Dashboard</h3>
                                                    <p>Awesome admin template</p>
                                                    <p class="text-extra-small">Based on Latest Bootstrap 3.1.0</p>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <img src="http://placehold.it/900x400/3c8dbc/000000" alt="...">
                                                <div class="carousel-caption">
                                                    <h3>Well Organized</h3>
                                                    <p>Awesome admin template</p>
                                                    <p class="text-extra-small">Huge UI Elements</p>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Controls -->
                                        <a class="left carousel-control" href="ui-components.html#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
                                        <a class="right carousel-control" href="ui-components.html#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
                                    </div>
                                </div>
                                <!--===================================================-->
                                <!--End Panel with Header-->
                            </div>
                            <div class="col-md-6">
                                <!--Panel with Header-->
                                <!--===================================================-->
                                <div class="panel panel-mint panel-colorful">
                                    <div class="panel-body">
                                        <div class="carousel slide auto" id="c-slide">
                                            <div class="carousel-inner">
                                                <div class="item text-center active">
                                                    <h3>MyAdmin is an Awesome Dashboard</h3>
                                                    <p>Awesome admin template</p>
                                                    <small>Based on Latest Bootstrap 3.1.0</small>
                                                </div>
                                                <div class="item text-center">
                                                    <h3>Well Organized</h3>
                                                    <p>Awesome admin template</p>
                                                    <small>Huge UI Elements</small>
                                                </div>
                                                <div class="item text-center">
                                                    <h3>Well Documentation</h3>
                                                    <p>Awesome admin template</p>
                                                    <small>Very Easy to Use</small>
                                                </div>
                                            </div>
                                            <a class="left carousel-control" href="ui-components.html#c-slide" data-slide="prev">
                                            <span class="fa fa-angle-left fa-2x"></span>
                                            </a>
                                            <a class="right carousel-control" href="ui-components.html#c-slide" data-slide="next">
                                            <span class="fa fa-angle-right fa-2x"></span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <!--===================================================-->
                                <!--End Panel with Header-->
                                <!--Panel with Header-->
                                <!--===================================================-->
                                <div class="panel">
                                    <div class="panel-body">
                                        <div class="carousel slide auto" id="d-slide">
                                            <div class="carousel-inner">
                                                <div class="item text-center active">
                                                    <h3>MyAdmin is an Awesome Dashboard</h3>
                                                    <p>Awesome admin template</p>
                                                    <small class="text-muted">Based on Latest Bootstrap 3.1.0</small>
                                                </div>
                                                <div class="item text-center">
                                                    <h3>Well Organized</h3>
                                                    <p>Awesome admin template</p>
                                                    <small class="text-muted">Huge UI Elements</small>
                                                </div>
                                                <div class="item text-center">
                                                    <h3>Well Documentation</h3>
                                                    <p>Awesome admin template</p>
                                                    <small class="text-muted">Very Easy to Use</small>
                                                </div>
                                            </div>
                                            <a class="left carousel-control" href="ui-components.html#d-slide" data-slide="prev">
                                            <span class="fa fa-angle-left fa-2x"></span>
                                            </a>
                                            <a class="right carousel-control" href="ui-components.html#d-slide" data-slide="next">
                                            <span class="fa fa-angle-right fa-2x"></span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <!--===================================================-->
                                <!--End Panel with Header-->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Labels & Badges</h3>
                                    </div>
                                    <div class="panel-body">
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th>Class</th>
                                                    <th>Labels</th>
                                                    <th>Badges</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Default</td>
                                                    <td><span class="label label-default">Default</span></td>
                                                    <td><span class="badge badge-default">6</span></td>
                                                </tr>
                                                <tr>
                                                    <td>Danger</td>
                                                    <td><span class="label label-danger">Danger</span></td>
                                                    <td><span class="badge badge-danger">4</span></td>
                                                </tr>
                                                <tr>
                                                    <td>Warning</td>
                                                    <td><span class="label label-warning">Warning</span></td>
                                                    <td><span class="badge badge-warning">7</span></td>
                                                </tr>
                                                <tr>
                                                    <td>Success</td>
                                                    <td><span class="label label-success">Success</span></td>
                                                    <td><span class="badge badge-success">8</span></td>
                                                </tr>
                                                <tr>
                                                    <td>Info</td>
                                                    <td><span class="label label-info">Info</span></td>
                                                    <td><span class="badge badge-info">2</span></td>
                                                </tr>
                                                <tr>
                                                    <td>Primary</td>
                                                    <td><span class="label label-primary">Primary</span></td>
                                                    <td><span class="badge badge-primary">5</span></td>
                                                </tr>
                                                <tr>
                                                    <td>Dark</td>
                                                    <td><span class="label label-dark">Dark</span></td>
                                                    <td><span class="badge badge-dark">12</span></td>
                                                </tr>
                                                <tr>
                                                    <td>Mint</td>
                                                    <td><span class="label label-mint">Mint</span></td>
                                                    <td><span class="badge badge-mint">12</span></td>
                                                </tr>
                                                <tr>
                                                    <td>Pink</td>
                                                    <td><span class="label label-pink">Pink</span></td>
                                                    <td><span class="badge badge-pink">12</span></td>
                                                </tr>
                                                <tr>
                                                    <td>Purple</td>
                                                    <td><span class="label label-purple">Purple</span></td>
                                                    <td><span class="badge badge-purple">12</span></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Pagination </h3>
                                    </div>
                                    <div class="panel-body">
                                        <h4>Sizing</h4>
                                        <p>Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.</p>
                                        <div>
                                            <ul class="pagination pagination-lg">
                                                <li>
                                                    <a href="ui-components.html#"> <i class="fa fa-angle-double-left"></i> </a>
                                                </li>
                                                <li> <a href="ui-components.html#"> 1 </a> </li>
                                                <li class="active"> <a href="ui-components.html#"> 2 </a> </li>
                                                <li> <a href="ui-components.html#"> 3 </a> </li>
                                                <li> <a href="ui-components.html#"> 4 </a> </li>
                                                <li> <a href="ui-components.html#"> 5 </a> </li>
                                                <li>
                                                    <a href="ui-components.html#"> <i class="fa fa-angle-double-right"></i> </a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div>
                                            <ul class="pagination">
                                                <li>
                                                    <a href="ui-components.html#"> <i class="fa fa-angle-double-left"></i> </a>
                                                </li>
                                                <li> <a href="ui-components.html#"> 1 </a> </li>
                                                <li class="active"> <a href="ui-components.html#"> 2 </a> </li>
                                                <li> <a href="ui-components.html#"> 3 </a> </li>
                                                <li> <a href="ui-components.html#"> 4 </a> </li>
                                                <li> <a href="ui-components.html#"> 5 </a> </li>
                                                <li>
                                                    <a href="ui-components.html#"> <i class="fa fa-angle-double-right"></i> </a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div>
                                            <ul class="pagination pagination-sm">
                                                <li>
                                                    <a href="ui-components.html#"> <i class="fa fa-angle-double-left"></i> </a>
                                                </li>
                                                <li> <a href="ui-components.html#"> 1 </a> </li>
                                                <li class="active"> <a href="ui-components.html#"> 2 </a> </li>
                                                <li> <a href="ui-components.html#"> 3 </a> </li>
                                                <li> <a href="ui-components.html#"> 4 </a> </li>
                                                <li> <a href="ui-components.html#"> 5 </a> </li>
                                                <li>
                                                    <a href="ui-components.html#"> <i class="fa fa-angle-double-right"></i> </a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div>
                                            <h4> Pager (Default & Aligned links) </h4>
                                            <ul class="pager">
                                                <li>
                                                    <a href="ui-components.html#"> <i class="fa fa-hand-o-left"></i> Previous </a>
                                                </li>
                                                <li> <a href="ui-components.html#"> Next <i class="fa fa-hand-o-right"></i> </a> </li>
                                            </ul>
                                        </div>
                                        <div>
                                            <ul class="pager">
                                                <li class="previous">
                                                    <a href="ui-components.html#"> <i class="fa fa-hand-o-left"></i> Previous </a>
                                                </li>
                                                <li class="next"> <a href="ui-components.html#"> Next <i class="fa fa-hand-o-right"></i> </a> </li>
                                            </ul>
                                        </div>
                                        <div>
                                            <h4>Optional disabled state</h4>
                                            <p>Pager links also use the general <code>.disabled</code> utility class from the pagination.</p>
                                            <ul class="pager">
                                                <li class="previous disabled">
                                                    <a href="ui-components.html#"> <i class="fa fa-hand-o-left"></i> Previous </a>
                                                </li>
                                                <li class="next"> <a href="ui-components.html#"> Next <i class="fa fa-hand-o-right"></i> </a> </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Basic Progress Bar </h3>
                                    </div>
                                    <div class="panel-body">
                                        <p>Add <code>.progress</code> to create a simple effect. Not available in IE8.</p>
                                        <div class="progress progress-lg">
                                            <div style="width: 15%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="15" role="progressbar" class="progress-bar progress-bar-mint">
                                                <span class="sr-only">15% Complete (success)</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-lg">
                                            <div style="width: 30%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" role="progressbar" class="progress-bar progress-bar-primary">
                                                <span class="sr-only">30% Complete (success)</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-lg">
                                            <div style="width: 45%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="45" role="progressbar" class="progress-bar progress-bar-success">
                                                <span class="sr-only">45% Complete (success)</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-lg">
                                            <div style="width: 60%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-info">
                                                <span class="sr-only">60% Complete</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-lg">
                                            <div style="width: 75%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar progress-bar-warning">
                                                <span class="sr-only">75% Complete (warning)</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-lg">
                                            <div style="width: 90%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" role="progressbar" class="progress-bar progress-bar-danger">
                                                <span class="sr-only">90% Complete (danger)</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Striped Progress Bar </h3>
                                    </div>
                                    <div class="panel-body">
                                        <p>Add <code>.progress-striped</code> to create a striped effect. Not available in IE8.</p>
                                        <div class="progress progress-striped progress-lg">
                                            <div style="width: 15%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="15" role="progressbar" class="progress-bar progress-bar-mint">
                                                <span class="sr-only">15% Complete (success)</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg">
                                            <div style="width: 30%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" role="progressbar" class="progress-bar progress-bar-primary">
                                                <span class="sr-only">30% Complete (success)</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg">
                                            <div style="width: 45%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="45" role="progressbar" class="progress-bar progress-bar-success">
                                                <span class="sr-only">45% Complete (success)</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg">
                                            <div style="width: 60%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-info">
                                                <span class="sr-only">60% Complete</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg">
                                            <div style="width: 75%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar progress-bar-warning">
                                                <span class="sr-only">75% Complete (warning)</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg">
                                            <div style="width: 90%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" role="progressbar" class="progress-bar progress-bar-danger">
                                                <span class="sr-only">90% Complete (danger)</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Animated Progress Bar </h3>
                                    </div>
                                    <div class="panel-body">
                                        <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p>
                                        <div class="progress progress-striped progress-lg active">
                                            <div style="width: 15%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="15" role="progressbar" class="progress-bar progress-bar-mint">
                                                <span class="sr-only">15% Complete (success)</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg active">
                                            <div style="width: 30%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" role="progressbar" class="progress-bar progress-bar-primary">
                                                <span class="sr-only">30% Complete (success)</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg active">
                                            <div style="width: 45%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="45" role="progressbar" class="progress-bar progress-bar-success">
                                                <span class="sr-only">45% Complete (success)</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg active">
                                            <div style="width: 60%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-info">
                                                <span class="sr-only">60% Complete</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg active">
                                            <div style="width: 75%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar progress-bar-warning">
                                                <span class="sr-only">75% Complete (warning)</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg active">
                                            <div style="width: 90%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" role="progressbar" class="progress-bar progress-bar-danger">
                                                <span class="sr-only">90% Complete (danger)</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Progress Bar </h3>
                                    </div>
                                    <div class="panel-body">
                                        <p>Add <code>.progress-striped</code> to create a striped effect. Not available in IE8.</p>
                                        <div class="progress progress-striped progress-lg">
                                            <div style="width: 15%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="15" role="progressbar" class="progress-bar progress-bar-mint">
                                                <span>15% Complete</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg">
                                            <div style="width: 30%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" role="progressbar" class="progress-bar progress-bar-primary">
                                                <span>30% Complete</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg">
                                            <div style="width: 45%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="45" role="progressbar" class="progress-bar progress-bar-success">
                                                <span>45% Complete</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg">
                                            <div style="width: 60%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-info">
                                                <span>60% Complete</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg">
                                            <div style="width: 75%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar progress-bar-warning">
                                                <span>75% Complete</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg">
                                            <div style="width: 90%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" role="progressbar" class="progress-bar progress-bar-danger">
                                                <span>90% Complete</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Animated Progress Bar </h3>
                                    </div>
                                    <div class="panel-body">
                                        <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p>
                                        <div class="progress progress-striped progress-lg active">
                                            <div style="width: 40%" class="progress-bar progress-bar-success">
                                                <span class="sr-only">35% Complete (success)</span>
                                            </div>
                                            <div style="width: 15%" class="progress-bar progress-bar-warning">
                                                <span class="sr-only">20% Complete (warning)</span>
                                            </div>
                                            <div style="width: 20%" class="progress-bar progress-bar-danger">
                                                <span class="sr-only">10% Complete (danger)</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg active">
                                            <div style="width: 25%" class="progress-bar progress-bar-success">
                                                <span class="sr-only">35% Complete (success)</span>
                                            </div>
                                            <div style="width: 10%" class="progress-bar progress-bar-warning">
                                                <span class="sr-only">20% Complete (warning)</span>
                                            </div>
                                            <div style="width: 25%" class="progress-bar progress-bar-danger">
                                                <span class="sr-only">10% Complete (danger)</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg active">
                                            <div style="width: 20%" class="progress-bar progress-bar-success">
                                                <span class="sr-only">35% Complete (success)</span>
                                            </div>
                                            <div style="width: 50%" class="progress-bar progress-bar-warning">
                                                <span class="sr-only">20% Complete (warning)</span>
                                            </div>
                                            <div style="width: 5%" class="progress-bar progress-bar-danger">
                                                <span class="sr-only">10% Complete (danger)</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg active">
                                            <div style="width: 55%" class="progress-bar progress-bar-success">
                                                <span class="sr-only">35% Complete (success)</span>
                                            </div>
                                            <div style="width: 10%" class="progress-bar progress-bar-warning">
                                                <span class="sr-only">20% Complete (warning)</span>
                                            </div>
                                            <div style="width: 5%" class="progress-bar progress-bar-danger">
                                                <span class="sr-only">10% Complete (danger)</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg active">
                                            <div style="width: 15%" class="progress-bar progress-bar-success">
                                                <span class="sr-only">35% Complete (success)</span>
                                            </div>
                                            <div style="width: 35%" class="progress-bar progress-bar-warning">
                                                <span class="sr-only">20% Complete (warning)</span>
                                            </div>
                                            <div style="width: 10%" class="progress-bar progress-bar-danger">
                                                <span class="sr-only">10% Complete (danger)</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg active">
                                            <div style="width: 40%" class="progress-bar progress-bar-info">
                                                <span class="sr-only">35% Complete (success)</span>
                                            </div>
                                            <div style="width: 5%" class="progress-bar progress-bar-danger">
                                                <span class="sr-only">20% Complete (warning)</span>
                                            </div>
                                            <div style="width: 15%" class="progress-bar progress-bar-success">
                                                <span class="sr-only">10% Complete (danger)</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Progress Bar </h3>
                                    </div>
                                    <div class="panel-body">
                                        <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p>
                                        <div class="progress progress-striped progress-lg active">
                                            <div style="width: 40%" class="progress-bar progress-bar-success">
                                                <span>35%</span>
                                            </div>
                                            <div style="width: 15%" class="progress-bar progress-bar-warning">
                                                <span>20%</span>
                                            </div>
                                            <div style="width: 20%" class="progress-bar progress-bar-danger">
                                                <span>10%</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg active">
                                            <div style="width: 25%" class="progress-bar progress-bar-success">
                                                <span>25%</span>
                                            </div>
                                            <div style="width: 10%" class="progress-bar progress-bar-warning">
                                                <span>10%</span>
                                            </div>
                                            <div style="width: 25%" class="progress-bar progress-bar-danger">
                                                <span>25%</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg active">
                                            <div style="width: 20%" class="progress-bar progress-bar-success">
                                                <span>20%</span>
                                            </div>
                                            <div style="width: 50%" class="progress-bar progress-bar-warning">
                                                <span>50%</span>
                                            </div>
                                            <div style="width: 5%" class="progress-bar progress-bar-danger">
                                                <span>5%</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg active">
                                            <div style="width: 55%" class="progress-bar progress-bar-success">
                                                <span>55%</span>
                                            </div>
                                            <div style="width: 10%" class="progress-bar progress-bar-warning">
                                                <span>10%</span>
                                            </div>
                                            <div style="width: 5%" class="progress-bar progress-bar-danger">
                                                <span>5%</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg active">
                                            <div style="width: 15%" class="progress-bar progress-bar-success">
                                                <span>15%</span>
                                            </div>
                                            <div style="width: 35%" class="progress-bar progress-bar-warning">
                                                <span>35%</span>
                                            </div>
                                            <div style="width: 10%" class="progress-bar progress-bar-danger">
                                                <span>10%</span>
                                            </div>
                                        </div>
                                        <div class="progress progress-striped progress-lg active">
                                            <div style="width: 40%" class="progress-bar progress-bar-info">
                                                <span>40%</span>
                                            </div>
                                            <div style="width: 5%" class="progress-bar progress-bar-danger">
                                                <span>5%</span>
                                            </div>
                                            <div style="width: 15%" class="progress-bar progress-bar-success">
                                                <span>15%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Breadcrumb </h3>
                                    </div>
                                    <div class="panel-body">
                                        <ol class="breadcrumb">
                                            <li><a href="ui-components.html#">Home</a></li>
                                        </ol>
                                        <ol class="breadcrumb">
                                            <li><a href="ui-components.html#">Home</a></li>
                                            <li class="active"><a href="ui-components.html#">Library</a></li>
                                        </ol>
                                        <ol class="breadcrumb">
                                            <li><a href="ui-components.html#">Home</a></li>
                                            <li><a href="ui-components.html#">Library</a></li>
                                            <li class="active">Data</li>
                                        </ol>
                                        <ol class="breadcrumb">
                                            <li><a href="ui-components.html#">Home</a></li>
                                            <li><a href="ui-components.html#">Library</a></li>
                                            <li><a href="ui-components.html#">Library 2</a></li>
                                            <li class="active">Data</li>
                                        </ol>
                                    </div>
                                </div>
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Thumbnails </h3>
                                    </div>
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-xs-6 col-md-3">
                                                <a href="ui-components.html#" class="thumbnail">
                                                <img src="http://placehold.it/171x180/39CCCC/ffffff" alt="...">
                                                </a>
                                            </div>
                                            <div class="col-xs-6 col-md-3">
                                                <a href="ui-components.html#" class="thumbnail">
                                                <img src="http://placehold.it/171x180/39CCCC/ffffff" alt="...">
                                                </a>
                                            </div>
                                            <div class="col-xs-6 col-md-3">
                                                <a href="ui-components.html#" class="thumbnail">
                                                <img src="http://placehold.it/171x180/39CCCC/ffffff" alt="...">
                                                </a>
                                            </div>
                                            <div class="col-xs-6 col-md-3">
                                                <a href="ui-components.html#" class="thumbnail">
                                                <img src="http://placehold.it/171x180/39CCCC/ffffff" alt="...">
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Custom content </h3>
                                    </div>
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-sm-6 col-md-4">
                                                <div class="thumbnail">
                                                    <img src="http://placehold.it/242x200/39CCCC/ffffff" alt="">
                                                    <div class="caption">
                                                        <h4>Thumbnail label</h4>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie venenatis convallis.</p>
                                                        <p><a href="ui-components.html#" class="btn btn-primary" role="button">Button</a> <a href="ui-components.html#" class="btn btn-default" role="button">Button</a></p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6 col-md-4">
                                                <div class="thumbnail">
                                                    <img src="http://placehold.it/242x200/39CCCC/ffffff" alt="">
                                                    <div class="caption">
                                                        <h4>Thumbnail label</h4>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie venenatis convallis.</p>
                                                        <p><a href="ui-components.html#" class="btn btn-primary" role="button">Button</a> <a href="ui-components.html#" class="btn btn-default" role="button">Button</a></p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6 col-md-4">
                                                <div class="thumbnail">
                                                    <img src="http://placehold.it/242x200/39CCCC/ffffff" alt="">
                                                    <div class="caption">
                                                        <h4>Thumbnail label</h4>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie venenatis convallis.</p>
                                                        <p><a href="ui-components.html#" class="btn btn-primary" role="button">Button</a> <a href="ui-components.html#" class="btn btn-default" role="button">Button</a></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Jumbotron </h3>
                                    </div>
                                    <div class="panel-body">
                                        <div class="jumbotron">
                                            <h1>Hello, world!</h1>
                                            <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                                            <p><a class="btn btn-primary btn-lg" href="ui-components.html#" role="button">Learn more</a></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Media object </h3>
                                    </div>
                                    <div class="panel-body">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="ui-components.html#">
                                                <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="http://placehold.it/64x64/39CCCC/ffffff">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Media heading</h4>
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                        </div>
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="ui-components.html#">
                                                <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="http://placehold.it/64x64/39CCCC/ffffff">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Media heading</h4>
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                                <div class="media">
                                                    <div class="media-left">
                                                        <a href="ui-components.html#">
                                                        <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="http://placehold.it/64x64/39CCCC/ffffff">
                                                        </a>
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading">Nested media heading</h4>
                                                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="media">
                                            <div class="media-body">
                                                <h4 class="media-heading">Media heading</h4>
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                                            </div>
                                            <div class="media-right">
                                                <a href="ui-components.html#">
                                                <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="http://placehold.it/64x64/39CCCC/ffffff">
                                                </a>
                                            </div>
                                        </div>
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="ui-components.html#">
                                                <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="http://placehold.it/64x64/39CCCC/ffffff">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Media heading</h4>
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                                            </div>
                                            <div class="media-right">
                                                <a href="ui-components.html#">
                                                <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="http://placehold.it/64x64/39CCCC/ffffff">
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Media alignment </h3>
                                    </div>
                                    <div class="panel-body">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="ui-components.html#">
                                                <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="http://placehold.it/64x64/39CCCC/ffffff">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Top aligned media</h4>
                                                <p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. </p>
                                                <p> Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </p>
                                            </div>
                                        </div>
                                        <div class="media">
                                            <div class="media-left media-middle">
                                                <a href="ui-components.html#">
                                                <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="http://placehold.it/64x64/39CCCC/ffffff">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Middle aligned media</h4>
                                                <p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. </p>
                                                <p> Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </p>
                                            </div>
                                        </div>
                                        <div class="media">
                                            <div class="media-left media-bottom">
                                                <a href="ui-components.html#">
                                                <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="http://placehold.it/64x64/39CCCC/ffffff">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Bottom aligned media</h4>
                                                <p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. </p>
                                                <p> Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Media object </h3>
                                    </div>
                                    <div class="panel-body">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="ui-components.html#">
                                                <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="http://placehold.it/64x64/39CCCC/ffffff">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Media heading</h4>
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                                <div class="media">
                                                    <div class="media-left">
                                                        <a href="ui-components.html#">
                                                        <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="http://placehold.it/64x64/39CCCC/ffffff">
                                                        </a>
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading">Nested media heading</h4>
                                                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                                        <div class="media">
                                                            <div class="media-left">
                                                                <a href="ui-components.html#">
                                                                <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="http://placehold.it/64x64/39CCCC/ffffff">
                                                                </a>
                                                            </div>
                                                            <div class="media-body">
                                                                <h4 class="media-heading">Nested media heading</h4>
                                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="media">
                                                    <div class="media-left">
                                                        <a href="ui-components.html#">
                                                        <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="http://placehold.it/64x64/39CCCC/ffffff">
                                                        </a>
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading">Nested media heading</h4>
                                                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> List group </h3>
                                    </div>
                                    <div class="panel-body">
                                        <ul class="list-group">
                                            <li class="list-group-item">Cras justo odio</li>
                                            <li class="list-group-item">Dapibus ac facilisis in</li>
                                            <li class="list-group-item">Morbi leo risus</li>
                                            <li class="list-group-item">Porta ac consectetur ac</li>
                                            <li class="list-group-item">Vestibulum at eros</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> List group with Badges</h3>
                                    </div>
                                    <div class="panel-body">
                                        <ul class="list-group">
                                            <li class="list-group-item"> <span class="badge">14</span> Cras justo odio</li>
                                            <li class="list-group-item"> <span class="badge">6</span>Dapibus ac facilisis in</li>
                                            <li class="list-group-item"> <span class="badge">12</span> Morbi leo risus</li>
                                            <li class="list-group-item"> <span class="badge">8</span>Porta ac consectetur ac</li>
                                            <li class="list-group-item"> <span class="badge">5</span>Vestibulum at eros</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> List group with Linked items</h3>
                                    </div>
                                    <div class="panel-body">
                                        <div class="list-group">
                                            <a href="ui-components.html#" class="list-group-item active">Cras justo odio</a>
                                            <a href="ui-components.html#" class="list-group-item">Dapibus ac facilisis in</a>
                                            <a href="ui-components.html#" class="list-group-item">Morbi leo risus</a>
                                            <a href="ui-components.html#" class="list-group-item">Porta ac consectetur ac</a>
                                            <a href="ui-components.html#" class="list-group-item">Vestibulum at eros</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Custom content </h3>
                                    </div>
                                    <div class="panel-body">
                                        <div class="list-group">
                                            <a href="ui-components.html#" class="list-group-item active">
                                                <h4 class="list-group-item-heading">List group item heading</h4>
                                                <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie venenatis convallis.</p>
                                            </a>
                                            <a href="ui-components.html#" class="list-group-item">
                                                <h4 class="list-group-item-heading">List group item heading</h4>
                                                <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie venenatis convallis.</p>
                                            </a>
                                            <a href="ui-components.html#" class="list-group-item">
                                                <h4 class="list-group-item-heading">List group item heading</h4>
                                                <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie venenatis convallis.</p>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Disabled items </h3>
                                    </div>
                                    <div class="panel-body">
                                        <div class="list-group">
                                            <a href="ui-components.html#" class="list-group-item disabled">Cras justo odio</a>
                                            <a href="ui-components.html#" class="list-group-item">Dapibus ac facilisis in</a>
                                            <a href="ui-components.html#" class="list-group-item">Morbi leo risus</a>
                                            <a href="ui-components.html#" class="list-group-item">Porta ac consectetur ac</a>
                                            <a href="ui-components.html#" class="list-group-item">Vestibulum at eros</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Contextual classes </h3>
                                    </div>
                                    <div class="panel-body">
                                        <ul class="list-group">
                                            <li class="list-group-item list-group-item-success">Cras justo odio</li>
                                            <li class="list-group-item list-group-item-info">Dapibus ac facilisis in</li>
                                            <li class="list-group-item list-group-item-warning">Morbi leo risus</li>
                                            <li class="list-group-item list-group-item-danger">Porta ac consectetur ac</li>
                                            <li class="list-group-item list-group-item-primary">Vestibulum at eros</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Responsive embed </h3>
                                    </div>
                                    <div class="panel-body">
                                        <!-- 16:9 aspect ratio -->
                                        <div class="embed-responsive embed-responsive-16by9">
                                            <iframe src="https://player.vimeo.com/video/162335075" allowfullscreen></iframe>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Responsive embed </h3>
                                    </div>
                                    <div class="panel-body">
                                        <!-- 16:9 aspect ratio -->
                                        <div class="embed-responsive embed-responsive-4by3">
                                            <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/162335075" allowfullscreen></iframe>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--===================================================-->
                    <!--End page content-->
                </section>
                <!--===================================================-->
                <!--END CONTENT CONTAINER-->
                <!--MAIN NAVIGATION-->
                <!--===================================================-->
                <nav id="mainnav-container">
                    <div id="mainnav">
                        <!--Menu-->
                        <!--================================-->
                        <div id="mainnav-menu-wrap">
                            <div class="nano">
                                <div class="nano-content">
                                    <ul id="mainnav-menu" class="list-group">
                                        <!--Category name-->
                                        <li class="list-header">Navigation</li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="javascript:void(0)">
                                            <i class="fa fa-home"></i>
                                            <span class="menu-title">Dashboard</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="index.html"><i class="fa fa-caret-right"></i> Homepage V1</a></li>
                                                <li><a href="dashboard-v2.html"><i class="fa fa-caret-right"></i> Homepage V2</a></li>
                                                <li><a href="dashboard-v3.html"><i class="fa fa-caret-right"></i> Homepage V3</a></li>
                                            </ul>
                                        </li>
                                        <!--Category name-->
                                        <li class="list-header">Components</li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="ui-components.html#">
                                            <i class="fa fa-briefcase"></i>
                                            <span class="menu-title">UI Elements</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="ui-animation.html"><i class="fa fa-caret-right"></i> CSS3 Animation </a></li>
                                                <li><a href="ui-panel.html"><i class="fa fa-caret-right"></i> Panel </a></li>
                                                <li><a href="ui-xeditable.html"><i class="fa fa-caret-right"></i> Xeditable </a></li>
                                                <li><a href="ui-button.html"><i class="fa fa-caret-right"></i> Buttons </a></li>
                                                <li><a href="ui-fontawesome.html"><i class="fa fa-caret-right"></i> Fontawesome </a></li>
                                                <li><a href="ui-icons.html"><i class="fa fa-caret-right"></i> Icons </a></li>
                                                <li><a href="ui-components.html"><i class="fa fa-caret-right"></i> Components </a></li>
                                                <li><a href="ui-timeline.html"><i class="fa fa-caret-right"></i> Timeline </a></li>
                                                <li><a href="ui-nested-lists.html"><i class="fa fa-caret-right"></i> Nested Lists </a></li>
                                                <li><a href="ui-grids.html"><i class="fa fa-caret-right"></i> Grids </a></li>
                                                <li><a href="ui-tab.html"><i class="fa fa-caret-right"></i> Tab </a></li>
                                                <li><a href="ui-accordions.html"><i class="fa fa-caret-right"></i> Accordions </a></li>
                                                <li><a href="ui-dragdrop.html"><i class="fa fa-caret-right"></i> Draggable Panel</a></li>
                                                <li><a href="ui-typography.html"><i class="fa fa-caret-right"></i> Typography </a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="ui-components.html#">
                                            <i class="fa fa-file"></i>
                                            <span class="menu-title">Pages</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="pages-faq.html"><i class="fa fa-caret-right"></i> FAQ </a></li>
                                                <li><a href="pages-gallery.html"><i class="fa fa-caret-right"></i> Gallery </a></li>
                                                <li><a href="pages-directory.html"><i class="fa fa-caret-right"></i> Directory </a></li>
                                                <li><a href="pages-profile.html"><i class="fa fa-caret-right"></i> User Profile </a></li>
                                                <li><a href="pages-invoice.html"><i class="fa fa-caret-right"></i> Invoice </a></li>
                                                <li><a href="pages-login.html"><i class="fa fa-caret-right"></i> Login </a></li>
                                                <li><a href="pages-register.html"><i class="fa fa-caret-right"></i> Register </a></li>
                                                <li><a href="pages-password-reminder.html"><i class="fa fa-caret-right"></i> Password Reminder </a></li>
                                                <li><a href="pages-lock-screen.html"><i class="fa fa-caret-right"></i> Lock Screen </a></li>
                                                <li><a href="pages-404.html"><i class="fa fa-caret-right"></i> 404 Error </a></li>
                                                <li><a href="pages-500.html"><i class="fa fa-caret-right"></i> 500 Error </a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="ui-components.html#">
                                            <i class="fa fa-table"></i>
                                            <span class="menu-title">Tables</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="table-static.html"><i class="fa fa-caret-right"></i> Static Table <span class="label label-info pull-right">New</span></a></li>
                                                <li><a href="table-datatable.html"><i class="fa fa-caret-right"></i> Datatable Table </a></li>
                                                <li><a href="table-footable.html"><i class="fa fa-caret-right"></i> Footable Table </a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="ui-components.html#">
                                            <i class="fa fa-edit"></i>
                                            <span class="menu-title">Forms</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="forms-layout.html"><i class="fa fa-caret-right"></i> Form Layout </a></li>
                                                <li><a href="forms-switchery.html"><i class="fa fa-caret-right"></i> Form Switchery </a></li>
                                                <li><a href="forms-components.html"><i class="fa fa-caret-right"></i> Form Components </a></li>
                                                <li><a href="forms-validation.html"><i class="fa fa-caret-right"></i> Form Validation </a></li>
                                                <li><a href="forms-wizard.html"><i class="fa fa-caret-right"></i> Form Wizard </a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="ui-components.html#">
                                            <i class="fa fa-line-chart"></i>
                                            <span class="menu-title">Charts</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="charts-flot.html"><i class="fa fa-caret-right"></i> Flot Chart </a></li>
                                                <li><a href="charts-morris.html"><i class="fa fa-caret-right"></i> Morris Chart </a></li>
                                            </ul>
                                        </li>
                                        <li class="list-divider"></li>
                                        <!--Category name-->
                                        <li class="list-header">Extra</li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="calendar.html">
                                            <i class="fa fa-calendar"></i>
                                            <span class="menu-title">
                                            Calendar
                                            </span>
                                            </a>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="ui-widgets.html">
                                            <i class="fa fa-flask"></i>
                                            <span class="menu-title">
                                               Widgets
                                            <span class="label label-pink pull-right">New</span>
                                            </span>
                                            </a>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="ui-components.html#">
                                            <i class="fa fa-envelope-o"></i>
                                            <span class="menu-title">Mail</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="mail-inbox.html"><i class="fa fa-caret-right"></i> Inbox </a></li>
                                                <li><a href="mail-compose.html"><i class="fa fa-caret-right"></i> Compose </a></li>
                                                <li><a href="mail-mailview.html"><i class="fa fa-caret-right"></i> Mail View </a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="ui-components.html#">
                                            <i class="fa fa-map-marker"></i>
                                            <span class="menu-title">
                                            Maps
                                            <span class="label label-mint pull-right">New</span>
                                            </span>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="maps-gmap.html">Google Maps</a></li>
                                                <li><a href="maps-vectormap.html">Vector Maps</a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="ui-components.html#">
                                            <i class="fa fa-plus-square"></i>
                                            <span class="menu-title">Menu Level</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="ui-components.html#"><i class="fa fa-caret-right"></i> Second Level Item</a></li>
                                                <li><a href="ui-components.html#"><i class="fa fa-caret-right"></i> Second Level Item</a></li>
                                                <li><a href="ui-components.html#"><i class="fa fa-caret-right"></i> Second Level Item</a></li>
                                                <li class="list-divider"></li>
                                                <li>
                                                    <a href="ui-components.html#">Third Level<i class="arrow"></i></a>
                                                    <!--Submenu-->
                                                    <ul class="collapse">
                                                        <li><a href="ui-components.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="ui-components.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="ui-components.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="ui-components.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a href="ui-components.html#">Third Level<i class="arrow"></i></a>
                                                    <!--Submenu-->
                                                    <ul class="collapse">
                                                        <li><a href="ui-components.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="ui-components.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="ui-components.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li class="list-divider"></li>
                                                        <li><a href="ui-components.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="ui-components.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <!--Widget-->
                                    <!--================================-->
                                    <div class="mainnav-widget">
                                        <!-- Show the button on collapsed navigation -->
                                        <div class="show-small">
                                            <a href="ui-components.html#" data-toggle="menu-widget" data-target="#demo-wg-server">
                                            <i class="fa fa-desktop"></i>
                                            </a>
                                        </div>
                                        <!-- Hide the content on collapsed navigation -->
                                        <div id="demo-wg-server" class="hide-small mainnav-widget-content">
                                            <ul class="list-group">
                                                <li class="list-header pad-no pad-ver">Server Status</li>
                                                <li class="mar-btm">
                                                    <span class="label label-primary pull-right">15%</span>
                                                    <p>CPU Usage</p>
                                                    <div class="progress progress-sm">
                                                        <div class="progress-bar progress-bar-primary" style="width: 15%;">
                                                            <span class="sr-only">15%</span>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="mar-btm">
                                                    <span class="label label-purple pull-right">75%</span>
                                                    <p>Bandwidth</p>
                                                    <div class="progress progress-sm">
                                                        <div class="progress-bar progress-bar-purple" style="width: 75%;">
                                                            <span class="sr-only">75%</span>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--================================-->
                                    <!--End widget-->
                                </div>
                            </div>
                        </div>
                        <!--================================-->
                        <!--End menu-->
                    </div>
                </nav>
                <!--===================================================-->
                <!--END MAIN NAVIGATION-->
                <!--ASIDE--> 
                <!--===================================================-->
                <aside id="aside-container">
                    <div id="aside">
                        <div class="nano closed">
                            <div class="nano-content">
                                <div class="fade in active">
                                    <h4 class="pad-hor text-thin"> Online Members (7) </h4>
                                    <ul class="list-group bg-trans">
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av1.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">John Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av2.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block pad-ver-5">
                                                    <div class="text-small">Jose Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av3.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Roy Banks</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av7.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Steven Jordan</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av4.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Scott Owens</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av5.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Melissa Hunt</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av1.png" alt="" class="img-sm"> <i class="busy bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">John Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av2.png" alt="" class="img-sm"> <i class="busy bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Jose Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av3.png" alt="" class="img-sm"> <i class="busy bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Roy Banks</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av7.png" alt="" class="img-sm"> <i class="busy bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Steven Jordan</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av1.png" alt="" class="img-sm"> <i class="off bottom text-light"></i> </div>
                                                <div class="inline-block pad-ver-5">
                                                    <div class="text-small">John Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av2.png" alt="" class="img-sm"> <i class="off bottom text-light"></i> </div>
                                                <div class="inline-block pad-ver-5">
                                                    <div class="text-small">Jose Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av3.png" alt="" class="img-sm"> <i class="off bottom text-light"></i> </div>
                                                <div class="inline-block pad-ver-5">
                                                    <div class="text-small">Roy Banks</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av7.png" alt="" class="img-sm"> <i class="off bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Steven Jordan</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </aside>
                <!--===================================================--> 
                <!--END ASIDE-->
                <!--RIGHT CHAT MESSANGER--> 
                <!--===================================================-->
                <aside class="conversation closed">
                    <div class="nano">
                        <div class="nano-content">
                            <div class="media">
                                <div class="media-left"> <a href="javascript:void(0)" class="conversation-toggle"> <i class="fa fa-angle-left"></i></a> </div>
                                <div class="media-body text-center">
                                    <h4 class="media-heading">John smith</h4>
                                    <p class="text-sm">Online</p>
                                </div>
                            </div>
                            <div class="chat-window">
                                <form class="form">
                                    <div class="floating-label">
                                        <textarea id="sidebarChatMessage" placeholder="Leave a message" rows="2" class="form-control autosize" name="sidebarChatMessage"></textarea>
                                        <label for="sidebarChatMessage"></label>
                                    </div>
                                </form>
                                <div class="msg_container_base">
                                    <div class="msg_container base_sent">
                                        <div class="col-md-9 col-xs-9">
                                            <div class="messages msg_sent">
                                                <p>that mongodb thing looks good, huh? </p>
                                                <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-xs-3 avatar"> <img src="img/av1.png" alt=""> </div>
                                    </div>
                                    <div class="msg_container">
                                        <div class="col-md-3 col-xs-3 avatar"> <img src="img/av2.png" alt=""> </div>
                                        <div class="col-md-9 col-xs-9">
                                            <div class="messages msg_receive">
                                                <p>that mongodb thing looks good, huh? </p>
                                                <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="msg_container">
                                        <div class="col-md-3 col-xs-3 avatar"> <img src="img/av2.png" alt=""> </div>
                                        <div class="col-xs-9 col-md-9">
                                            <div class="messages msg_receive">
                                                <p>that mongodb thing looks good, huh? </p>
                                                <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="msg_container base_sent">
                                        <div class="col-xs-9 col-md-9">
                                            <div class="messages msg_sent">
                                                <p>that mongodb thing looks good, huh? </p>
                                                <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-xs-3 avatar"> <img src="img/av1.png" alt=""> </div>
                                    </div>
                                    <div class="msg_container">
                                        <div class="col-md-3 col-xs-3 avatar"> <img src="img/av2.png" alt=""> </div>
                                        <div class="col-xs-9 col-md-9">
                                            <div class="messages msg_receive">
                                                <p>that mongodb thing looks good, huh?</p>
                                                <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </aside>
                <!--END RIGHT CHAT MESSANGER--> 
                <!--===================================================-->
            </div>
            <!-- FOOTER -->
            <!--===================================================-->
            <footer id="footer">
                <!-- Visible when footer positions are fixed -->
                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                <div class="show-fixed pull-right">
                    <ul class="footer-list list-inline">
                        <li>
                            <p class="text-sm">SEO Proggres</p>
                            <div class="progress progress-sm progress-light-base">
                                <div style="width: 80%" class="progress-bar progress-bar-danger"></div>
                            </div>
                        </li>
                        <li>
                            <p class="text-sm">Online Tutorial</p>
                            <div class="progress progress-sm progress-light-base">
                                <div style="width: 80%" class="progress-bar progress-bar-primary"></div>
                            </div>
                        </li>
                        <li>
                            <button class="btn btn-sm btn-dark btn-active-success">Checkout</button>
                        </li>
                    </ul>
                </div>
                <!-- Visible when footer positions are static -->
                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                <div class="hide-fixed pull-right pad-rgt">Currently v2.2</div>
                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                <!-- Remove the class name "show-fixed" and "hide-fixed" to make the content always appears. -->
                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                <p class="pad-lft">&#0169; 2015 Your Company</p>
            </footer>
            <!--===================================================-->
            <!-- END FOOTER -->
            <!-- SCROLL TOP BUTTON -->
            <!--===================================================-->
            <button id="scroll-top" class="btn"><i class="fa fa-chevron-up"></i></button>
            <!--===================================================-->
        </div>
        <!--===================================================-->
        <!-- END OF CONTAINER -->
        <!--JAVASCRIPT-->
        <!--=================================================-->
        <!--jQuery [ REQUIRED ]-->
        <script src="js/jquery-2.1.1.min.js"></script>
        <!--BootstrapJS [ RECOMMENDED ]-->
        <script src="js/bootstrap.min.js"></script>
        <!--Fast Click [ OPTIONAL ]-->
        <script src="plugins/fast-click/fastclick.min.js"></script>
        <!--Jasmine Admin [ REQUIRED ]--> 
        <script src="js/scripts.js"></script> 
        <!--Jquery Nano Scroller js [ REQUIRED ]-->
        <script src="plugins/nanoscrollerjs/jquery.nanoscroller.min.js"></script>
        <!--Merismenu js [ REQUIRED ]-->
        <script src="plugins/metismenu/metismenu.min.js"></script>
        <!--Switchery [ OPTIONAL ]-->
        <script src="plugins/switchery/switchery.min.js"></script>
        <!--Bootstrap Select [ OPTIONAL ]-->
        <script src="plugins/bootstrap-select/bootstrap-select.min.js"></script>
        <!--Fullscreen jQuery [ OPTIONAL ]-->
        <script src="plugins/screenfull/screenfull.js"></script>

    </body>
</html>